<!DOCTYPE html>
<html lang="zh-CH">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客</title>
    <link rel="stylesheet" href="./font_4848197_k6fzmbazy5m//iconfont.css">
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        
        body{
            background-color: #f5f7fa;
        }
        @media screen and (max-width:600px){
            nav{
                display: flex;
                flex-direction:column;

            }
        }
        @media screen and (max-width:900px) {
            .section{
                display: flex;
                flex-direction: column-reverse;
            }
        }
        .contain{
            /* background-color: antiquewhite; */
            margin: 20px ;
        }
        nav{
            display: flex;
            align-items: center;
            
            justify-content: space-between;
            /* 渐变知识点 */
            background: linear-gradient(135deg,#6a11cb 0%, #2575fc 100%);
            width: 100%;
            box-sizing: border-box;
            padding:20px;
            border-radius: 10px;
            
        }
        nav .you{
            padding-right: 20px;
            margin: 10px;
        }
        nav .you ul{
            display: flex;
            list-style: none;
            
            }
        nav .you ul li{
            margin-left: 25px;
            
        }
        a{
            text-decoration: none;
            color: white;
        }
        nav .zuo{
            font-weight: 700;
            font-size: 24px;
            color: white;
            margin: 10px;
        }
        nav .zuo::before{
              content: '';
              font-family: "iconfont";
              
        }
        .a{
            margin: 20px;
        }
        .section{
            max-width: 1200px;
            display: flex;
            justify-content: space-between;
            /* background-color: antiquewhite; */
            margin: 20px auto;
            /* padding: 0 60px; */
        }
        .section .zuo{
            width: 100%;
            flex: 3;
            
            /* background-color: aqua; */
            margin-right: 20px;
        }
        .section .zuo ul{
            display: flex;
            width: 100%;
            flex-direction: column;
        }
        .section .zuo ul li{
            width: 100%;
            margin-bottom: 30px;
            border-radius: 15px;
            overflow: hidden;
            width: 100%;
            background: white;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
            transition: transform 0.2s;
        }
        .section .zuo ul li:hover{
            transform: translateY(-5px);
        }
        li{
            list-style: none;
        }
        .section .you{
            flex: 1;
            /* background-color: cadetblue; */
        }
        .section .zuo ul li img{
            height: 200px;
            width: 100%;
            object-fit: cover;
        }
        .section .zuo ul li h3{
            margin-bottom: 15px;
        }
        .section .zuo ul li .zi{
            padding: 25px;
        }
        .section .zuo ul li p{
            color: #7f8c8d;
            /* margin-bottom: 20px; */
            line-height: 1.8;
        }
        .section .zuo ul li button{
            border-radius: 20px;
            margin-top: 30px;
            overflow: hidden;
            border: 0;
            color: white;
           
        }
        .section .zuo ul li button a{
            padding: 10px 20px;
            box-sizing: border-box;
             transition: background 3s;
            display: inline-block;
            text-decoration: none;
            width: 100%;
            height: 100%;
            background: #3498db;
            
        }
        .section .zuo ul li button a:hover{
            background: plum;
        }
        .weibu .z::before{
            content: '';
            font-family: 'iconfont';
        }
        .weibu{
            display: flex;
            justify-content: space-between;
            font-size: 14px;
            line-height: 1.6;
            padding-top:15px ;
            font-weight: 400;
            border-top: 1px solid rgb(190, 190, 173,0.6);
        }
        .section .you{
            border-radius: 10px;
            padding: 25px;
            
            background: white;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
        }
        .section .you .tx{
            width: 100px;
            height: 100px;
            margin: 0 auto;
            border-radius: 50px;
            overflow: hidden;
            margin-bottom: 15px;
        }
        .section .you .tx img{
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: top;
            vertical-align: bottom;
        }
        .section .you #xm{
            text-align: center;
            letter-spacing:2px;
        }
        .section .you .z{
            color: #7f8c8d;
            text-align: center;
            margin-bottom: 15px;
            padding-bottom: 15px;
            letter-spacing:2px;
        }
        .zititub{
            text-align: center;
            color:#7f8c8d ;
            display: flex;
            gap: 15px;
            justify-content: center;
            margin-bottom: 30px;
        }
        .zititub span{
            font-size: 20px;
            display: inline-block;
            
        }
        #wz{
            font-weight: 500;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid #f1f1f1;
        }
        .section .you ul li{
            border-bottom: 1px solid #f1f1f1;
            padding: 12px;
            color: #7f8c8d;;
        }
        .section .you ul li:last-child{
            border: none;
        }
        .footer{
            text-align: center;
            text-align: center;
            margin-top: 50px;
            color: #7f8c8d;
            font-size: 14px;
            
        }
    </style>
</head>
<body>
   <div class="contain">
        <nav>
            <div class="zuo">
                <!-- <span class="iconfont icon-tubiaoyuanwenjian_fuzhi_bokerukou_bokerukou"></span> -->
                <span>简约博客</span>
            </div>
            <div class="you">
                <ul>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">文章</a></li>
                    <li><a href="#">分类</a></li>
                    <li><a href="#">关于</a></li>
                    <li><a href="#">联系 </a></li>
                </ul>
            </div>
        </nav>
   </div>
   <div class="a">
<div class="section">
        <div class="zuo">
            <ul>
                <li>
                    <img src="./images/博客.png" alt="">
                    <div class="zi">
                        <h3>前端开发中的CSS布局技巧</h3>
                    <p>在这篇文章中，我们将探讨现代CSS布局技术，包括Flexbox和Grid布局的实用技巧，以及如何创建响应式设计来适应各种屏幕尺寸。</p>
                        <button value=""><a href="">阅读更多</a></button>
                        <div class="weibu">
                            <p class="z">
                                2025年9月15日
                            </p>
                            <p class="y">
                                <span class="iconfont icon-comment-v2"></span>
                                23
                                <span class="iconfont icon-dianzan"></span>
                                45
                            </p>
                        </div>
                    </div>    
                </li>
                <li>
                    <img src="./images/博客1.png" alt="">
                    <div class="zi">
                        <h3>前端开发中的CSS布局技巧</h3>
                    <p>闭包是JavaScript中一个强大且常常被误解的概念。本文将深入探讨闭包的工作原理、使用场景以及如何避免常见的内存泄漏问题。                     <button value=""><a href="">阅读更多</a></button>
                        <div class="weibu">
                            <p class="z">
                                2025年9月15日
                            </p>
                            <p class="y">
                                <span class="iconfont icon-comment-v2"></span>
                                23
                                <span class="iconfont icon-dianzan"></span>
                                45
                            </p>
                        </div>
                    </div>    
                </li>
                <li><img src="./images/博客2.png" alt="">
                    <div class="zi">
                        <h3>前端开发中的CSS布局技巧</h3>
                    <p>HTML5引入了许多新特性和语义化标签，使Web开发更加高效和结构化。本文将介绍这些新特性，并展示如何在实际项目中使用它们。                      <button value=""><a href="">阅读更多</a></button>
                        <div class="weibu">
                            <p class="z">
                                2025年9月15日
                            </p>
                            <p class="y">
                                <span class="iconfont icon-comment-v2"></span>
                                23
                                <span class="iconfont icon-dianzan"></span>
                                45
                            </p>
                        </div>
                    </div>    </li>
            </ul>
        </div>
        <div class="you">
            <div class="tx">
                <img src="./images/lyf.jpeg" alt="">
            </div>
            <h3 id="xm">段段</h3>
            <p class="z">前端开发工程师，热爱Web技术和用户体验设计，喜欢分享知识和学习新技术。</p>
            <p class="zititub">
                <span class="iconfont "></span>
                <span class="iconfont "></span>
                <span class="iconfont "></span>
                <span class="iconfont "></span>
            </p>
            <h3 id="wz">
                文章分类
            </h3>
            <ul>
                <li>前端开发</li>
                <li>JavaScript</li>
                <li>CSS技巧</li>
                <li>响应式设计</li>
                <li>Web性能优化</li>
            </ul>
            
        </div>
   </div>
   </div>
   <div class="footer">
    <span class="iconfont"></span>
     2023 简约博客 - 专注Web前端技术分享
   </div>
   <script>
    console.log(document.body)
    document.title='dddbk'
   </script>
</body>
</html>